<template>
  <div class="right-chart-1">
    <div class="title cursorPointer">生产异常</div>
    <div class="wrap">
      <template v-if="!noData">
        <div class="top">
          <div class="legend">
            <div
              v-for="item in summaryList"
              :key="item.name"
              class="legend-item"
              @click="handleLegendClick(item)"
            >
              <i :style="{ 'background-color': item.color }"></i>
              <span>{{ item.name }}({{ item.value }})</span>
            </div>
          </div>
          <el-checkbox
            v-model="qulityControl"
            label="品控关注"
            border
            size="mini"
            true-label="Y"
            :false-label="null"
            @change="handleQulityChange"
          ></el-checkbox>
        </div>
        <dv-scroll-board
          ref="scrollBoard"
          :config="tableConfig"
          class="lc2-chart"
        />
      </template>
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import { getAbnormalByTime } from "@/api/dashboard/blowIrriagtionSpinLineDaily";
import { statusMapList } from "@/views/exceptionMgmt/enum";
import { mapMutations } from "vuex";

export default {
  name: "RightChart3",
  components: { CustomChart },
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    groupItem: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      qulityControl: null,
      summaryList: [],
      tableConfig: {
        headerBGC: "#050f67",
        header: ["待处理异常指标", "异常描述", "异常等级", "责任人"],
        data: [],
        index: true,
        rowNum: 2,
        indexHeader: "序号",
        columnWidth: [80, 185, 220, 147, 106],
        align: ["center", "center", "center", "center", "center"],
        oddRowBGC: "#053a6d",
        evenRowBGC: "#091c56",
        waitTime: 6000,
        carousel: "page",
      },
    };
  },
  computed: {
    noData() {
      return !this.lineItem || !this.groupItem;
    },
  },
  methods: {
    ...mapMutations("workbench", [
      "SET_ABNORMAL_DETAIL",
      "SET_ABNORMAL_HIS_DETAIL",
    ]),
    // 获取统计数据
    getSummary() {
      if (!this.lineItem || !this.groupItem) {
        return;
      }
      const { startTime, endTime, groupId } = this.groupItem;
      const { lineCode } = this.lineItem.properties;

      const param = {
        start: startTime,
        end: endTime,
        qulityControl: this.qulityControl,
        erpProductionLineCodes: [lineCode],
        groupId
      };
      getAbnormalByTime(param)
        .then((res) => {
          const {
            abnormalHandle,
            abnormalProgress,
            abnormalIgnore,
            abnormalComplate,
            abnormalClose,
          } = res.data;

          this.summaryList = [
            { value: abnormalHandle, name: "待处理", color: "#5470c6" },
            { value: abnormalProgress, name: "进行中", color: "#5cc3eb" },
            { value: abnormalIgnore, name: "已忽略", color: "#fac858" },
            { value: abnormalComplate, name: "已完成", color: "#74d047" },
            { value: abnormalClose, name: "已关闭", color: "#ab9578" },
          ];

          // 列表
          const orderList = res?.data?.abnormalOrderDtos || [];
          const lists = orderList.map((ele) => [
            `<span class="text-wrap-box"><span class="text-wrap">${ele.abnormalName}</span></span>`,
            `<span class="text-wrap-box"><span class="text-wrap">${ele.abnormalDes}</span></span>`,
            `<span class="text-wrap-box"><span class="text-wrap">${ele.abnormalLevelName}</span></span>`,
            `<span class="text-wrap-box"><span class="text-wrap">${ele.processor}</span></span>`,
          ]);
          this.tableConfig = { ...this.tableConfig, data: lists };
        })
        .catch(() => {
          this.summaryList = [];
          this.tableConfig = { ...this.tableConfig, data: [] };
        });
    },
    handleQulityChange(value) {
      this.getSummary();
    },
    handleLegendClick(item) {
      if (!this.lineItem) {
        return;
      }
      const status =
        statusMapList?.length &&
        statusMapList.find((ele) => ele.label === item.name)?.value;

      if (!status) {
        return;
      }

      // 当前的产线
      const { factoryDeptCode, workshopCode, lineCode, lineId } =
        this.lineItem.properties;

      let path = "./";
      if (status == "1" || status == "2") {
        //待处理，进行中
        this.SET_ABNORMAL_DETAIL({
          factoryDeptCode,
          workshopCode,
          erpProductionLineCode: lineCode,
          lineId,
          relatedVsMe: false,
          qulityControl: this.qulityControl,
          status,
          start: this.groupItem.startTime,
          end: this.groupItem.endTime,
        });
        path = "/exceptionMgmt/operate";
      } else if (status == "3" || status == "4" || status == "5") {
        //已完成，已关闭，已忽略
        this.SET_ABNORMAL_HIS_DETAIL({
          factoryDeptCode,
          workshopCode,
          erpProductionLineCode: lineCode,
          lineId,
          relatedVsMe: false,
          qulityControl: this.qulityControl,
          status,
          start: this.groupItem.startTime,
          end: this.groupItem.endTime,
        });
        path = "/exceptionMgmt/history";
      }

      this.$router.push({ path });
    },
  },
  watch: {
    groupItem: {
      handler() {
        this.getSummary();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.right-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .wrap {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 35px;

    .lc2-chart {
      flex: 1;
    }
  }
  .top {
    width: 100%;
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .legend {
      flex: 1;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-flow: wrap;
    }

    .legend-item {
      width: 20%;
      text-align: center;
      i {
        display: inline-block;
        vertical-align: middle;
        width: 12px;
        height: 12px;
        border-radius: 2px;
        cursor: pointer;
      }
      span {
        padding-left: 5px;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }

  ::v-deep {
    .text-wrap-box {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .text-wrap {
      height: calc(17px * 3);
      line-height: 17px;
      -webkit-line-clamp: 3;
      white-space: wrap;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .el-checkbox__label {
      color: #ffffff;
    }
  }
}
</style>
